<template>
  <footer class="footer">
    <span class="todo-count"><strong>{{sum}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <a :class="{selected:form==='all'}" href="#/" @click="changeForm('all')">全部</a>
      </li>
      <li>
        <a :class="{selected:form==='active'}" href="#/active"  @click="changeForm('active')">进行中</a>
      </li>
      <li>
        <a :class="{selected:form==='completed'}" href="#/completed"  @click="changeForm('completed')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearAll" v-show="btnShow">清除已完成</button>
  </footer>
</template>

<script>
export default {
  components: {},
  props: {
    sum:{
      type:Number,
      required:true
    },
    btnShow:{
      type:Boolean,
      required:true
    },
    form:{
      type:String,
      required:true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},

  methods: {
    clearAll(){
      this.$emit('clearAll')
    },
    changeForm(value){
      this.$emit('changeForm',value)
    }
  },
}
</script>

<style scoped></style>
